<template>
  <!-- <div>领取用户列表</div> -->

  <div class="shop">
    <div class="top">
      <div style="display:inline-block;width:500px">
        <span>优惠券面额：{{datalist.price}}， 总发行：{{datalist.stock_total}}张，每人限领数量：{{datalist.per_limit}}张，</span>
        <br />
        <span>券使用有效周期：{{datalist.publish_start_time}} 至 {{datalist.publish_end_time}}</span>
      </div>
      <el-button class="search" size="small" @click="goBack">返回上一页</el-button>
      <el-button class="search" size="small" type="primary" @click="searchCategoryData">搜索</el-button>

      <el-input
        class="search input"
        size="small"
        v-model="form.user"
        placeholder="输入id或手机号查询"
        clearable
      ></el-input>
    </div>

    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="领取ID" prop="id"></el-table-column>
      <el-table-column label="用户ID" prop="id">
        <template slot-scope="scope">{{scope.row.belongs_to_user.id}}</template>
      </el-table-column>
      <el-table-column label="用户名称" prop="mobile">
        <template slot-scope="scope">{{scope.row.belongs_to_user.mobile}}</template>
      </el-table-column>
      <el-table-column label="领取时间" prop="create_time"></el-table-column>
      <el-table-column label="使用时间" prop="use_time"></el-table-column>
      <el-table-column label="使用状态" prop="status">
        <template slot-scope="scope">
          <p v-if="scope.row.status==0">已领取</p>
          <p v-if="scope.row.status==1">已使用</p>
          <p v-if="scope.row.status==2">待领取</p>
          <p v-if="scope.row.status==3">冻结中</p>
        </template>
      </el-table-column>
      <!-- <el-table-column label="状态" prop="id"></el-table-column> -->
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>


<script>
import {
  CouponRelevanceUserList
} from "@/api/autarky";

export default {
  data() {
    return {
      showCate_id: "",
      selectedItems: [],
      form: {
        coupon_id: "",
        page: 1,
        size: 20,
        user:'',
      },

      total: 0,
      tableData: [],
      datalist:{},
    };
  },
  mounted() {
    let data = JSON.parse(this.$route.query.datalist);
    this.datalist = Object.assign({}, data);
    this.form.coupon_id = this.datalist.id;
    this.getsCouponRelevanceShopListData();
  },
  methods: {
    //搜索数据
    searchCategoryData() {
      this.getsCouponRelevanceShopListData();
    },
    pageChange(page) {
      this.form.page = page;
      //获取更多数据
      this.getsCouponRelevanceShopListData();
    },
    async getsCouponRelevanceShopListData(){
      var url = "page=" + this.form.page +'&coupon_id='+this.form.coupon_id+'&user='+this.form.user;
      let res = await CouponRelevanceUserList(url);
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    // 上一页
    goBack(){
        this.$router.go(-1)
    },

    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .top {
    margin-bottom: 20px;

    .search {
      float: right;
      margin-left: 12px;
    }

    .input {
      width: 150px;
    }
  }

  .cetain {
    color: #f4222d;
  }

  .pagination {
    float: right;
    margin-top: 12px;
  }

  .icon_cate {
    float: left;
  }

  .demo-ruleForm {
    padding: 20px;
  }

  .note {
    color: #666666;
    font-size: 14px;
    margin-top: 28px;
  }

  .align {
    text-align: center;
    margin-bottom: 20px;
  }
}

</style>
